<template>
  <div class="circle-layer-control">
    <button
      class="btn"
      v-for="item in btnList"
      :key="item.id"
      @click="handleCircleLayer(item.type)"
    >
      {{ `${item.typeName}circle` }}
    </button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      btnList: [
        { id: "01", type: "add", typeName: "添加" },
        { id: "02", type: "clearClickEvent", typeName: "清空点击事件" },
        { id: "03", type: "remove", typeName: "移除" },
        { id: "04", type: "showAllCircleLayers", typeName: "显示" },
        { id: "05", type: "hideAllCircleLayers", typeName: "隐藏" },
        { id: "06", type: "addLocateImg", typeName: "添加定位图片" },
        { id: "07", type: "removeComponents", typeName: "移除dom" },
        { id: "08", type: "hideComponents", typeName: "隐藏dom" },
      ],
    };
  },
  methods: {
    handleCircleLayer(type) {
      switch (type) {
        case "add":
          var data = {
            id: "circleLayer",
            type: "circle",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Point",
                      coordinates: [-96, 37.8],
                    },
                    properties: {
                      title: "Simulated Circle",
                      description: "This is a simulated circle.",
                    },
                  },
                ],
              },
            },
            minzoom: 10,
            paint: {
              "circle-radius": 10,
              "circle-color": "rgba(255, 0, 0, 0.8)",
            },
          };
          this.getSelf().addCircleLayer(data);
          break;

        case "clearClickEvent":
          this.getSelf().clearLayerEvents([{
            type: "click",
            layerId: "circleLayer"
          }])
          console.log("移除所有点击事件");
          break;

        case "remove":
          this.getSelf().removeCircleLayer();
          break;

        case "showAllCircleLayers":
          this.getSelf().showAllCircleLayers();
          break;

        case "hideAllCircleLayers":
          this.getSelf().hideAllCircleLayers();
          break;

        case "addLocateImg":
          this.getSelf().addLocateImg();
          break;

        case "removeComponents":
          this.getSelf().removeComponents();
          break;

        case "hideComponents":
          this.getSelf().hideComponents();
          break;

        default:
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.circle-layer-control {
  position: fixed;
  right: 20px;
  top: 20px;
  .btn {
    margin-right: 10px;
  }
}
</style>
